<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值{{ taskNumber }}</strong></span>
    <ul class="filters">
      <li>
        <a 
        :class="{selected: state === '0'  ? true : false}"
        href="javascript:;" 
        @click="$store.commit('setState', '0')"
         >全部</a>
      </li>
      <li>
        <a
         :class="{selected: state === '-1'  ? true : false}"
         href="javascript:;"
         @click="$store.commit('setState', '-1')"
         >未完成</a>
      </li>
      <li>
        <a 
        :class="{selected:  state === '1' ? true : false}"
        href="javascript:;" 
         @click="$store.commit('setState', '1')"
        >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" 
    @click="$store.commit('delCompleteTask')"
    >清除已完成</button>
  </footer>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
computed: {
    ...mapGetters(['taskNumber', 'state'])
  },
}
</script>
